<!-- 装备画像 -->
<template>
  <div class="portrait" v-if="isShow === 0">
    <LeftTree
      :treeData="treeData"
      :isExtraShow="true"
      :selectedKeys="selectedKeys"
      :expandedKeys="selectedKeys"
      @funSelectNode="funSelectNode"
      @funCreateNode="funCreateNode"
      @funEditNode="funEditNode"
      @funDeleteNode="funDeleteNode"
    ></LeftTree>
    <a-card class="main">
      <div class="main-header">
        <AddFrom ref="addFrom" :parentId="parentId" @funCheckRadio="funCheckRadio"></AddFrom>
        <a-radio-group type="button" v-model="checkedValue" @change="funCheckRadio">
          <a-radio value="1">卡片模式</a-radio>
          <a-radio value="2">列表模式</a-radio>
        </a-radio-group>
      </div>
      <Card
        v-if="checkedValue === '1'"
        ref="cardList"
        :parentId="parentId"
        @funCheckDetail="funCheckDetail"
        @funEditCard="funEditCard"
      ></Card>
      <Table
        v-else
        ref="tableList"
        :parentId="parentId"
        @funCheckDetail="funCheckDetail"
        @funEditTable="funEditCard"
      ></Table>
    </a-card>
  </div>
  <Detail v-else @onGoBack="onGoBack" ref="detailData"></Detail>
</template>
<script setup>
import { Message } from '@arco-design/web-vue'
import LeftTree from '@/components/leftTree/index'
import AddFrom from './addFrom.vue'
import Card from './card.vue'
import Table from './table.vue'
import Detail from './detail.vue'
import { ref, onMounted, nextTick, provide } from 'vue'
import { apiHome } from '@/api/healthAssessment'
const isShow = ref(0)
const checkedValue = ref('1')
const treeData = ref([]) // 节点树
const selectedKeys = ref('')
const parentId = ref('')
const nodeSatelliteId = ref('')
// 获取节点树
const funNodeTree = () => {
  apiHome
    .getPortraitNodeTree()
    .then((res) => {
      if (res.code === 200) {
        calleArr(res.data)
        selectedKeys.value = res.data[0].id
        parentId.value = res.data[0].id
        treeData.value = res.data
        funCheckRadio()
      }
    })
    .catch(() => {})
}
// 遍历children
const calleArr = (array) => {
  for (const i in array) {
    const data = array[i]
    data.level = JSON.parse(data.level)
    if (data.children) {
      calleArr(data.children)
    }
  }
}
// 创建新节点
const funCreateNode = (nodeData) => {
  const children = nodeData.children || []
  children.push({
    level: nodeData.level + 1,
    id: '',
    nodeName: '新建节点',
    parentId: nodeData.id,
    children: []
  })
  nodeData.children = children
  const objData = children[children.length - 1]
  apiHome
    .getPortraitAddNodeTree(objData.nodeName, objData.parentId, objData.level)
    .then((res) => {
      if (res.code === 200) {
        Message.success('节点创建成功!')
        funNodeTree()
      } else {
        Message.error(res.message)
      }
    })
    .catch(() => {})
}
// 编辑
const funEditNode = (nodeData) => {
  apiHome
    .getPortraitEditNodeTree(nodeData.nodeName, nodeData.parentId, nodeData.level, nodeData.id)
    .then((res) => {
      if (res.code === 200) {
        Message.success('节点修改成功!')
        funNodeTree()
      } else {
        Message.error(res.message)
      }
    })
    .catch(() => {})
}
// 删除
const funDeleteNode = (nodeData) => {
  apiHome
    .getPortraitDelNodeTree(nodeData.id)
    .then((res) => {
      if (res.code === 200) {
        Message.success('节点删除成功!')
        funNodeTree()
      } else {
        Message.error(res.message)
      }
    })
    .catch(() => {})
}
const cardList = ref()
const tableList = ref()
// 点击节点
const funSelectNode = (nodeData, event) => {
  if (event.selectedNodes[0].isEdit !== 1) {
    parentId.value = nodeData[0]
    funCheckRadio()
  }
}
// 切换
const funCheckRadio = () => {
  if (checkedValue.value === '1') {
    nextTick(() => {
      cardList.value.funCardDataList()
    })
  } else {
    nextTick(() => {
      tableList.value.funTableDataList()
    })
  }
}
const detailData = ref(null)
// 查看详情
const funCheckDetail = (data) => {
  isShow.value = 1
  nextTick(() => {
    if (data?.id) nodeSatelliteId.value = data?.id
    detailData.value.funDataList(data?.id || nodeSatelliteId.value, 1)
  })
}
provide('updateFunCheckDetail', funCheckDetail)
const addFrom = ref()
// 右侧编辑
const funEditCard = (data) => {
  nextTick(() => {
    addFrom.value.funEditCard(data)
  })
}
// 返回
const onGoBack = () => {
  isShow.value = 0
  funCheckRadio()
}
onMounted(() => {
  funNodeTree()
})
</script>
<style lang="less" scoped>
.portrait {
  display: flex;
  height: 100%;
  gap: 12px;

  .main {
    flex: 1;
    height: 100%;

    :deep(.arco-card-body) {
      height: 100%;
      width: 100%;
      padding: 16px;
    }
    .main-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
    }
  }
}
</style>
